<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <XForm
          :fieldList="fieldList"
          :formOption="optionsDataAll"
          :formData="form"
        >
          <template #create_user="{ value, input }">
            <VCascader
              :model-value="value"
              @update:model-value="input"
              collapse-tags
              class="w-[200px]"
              placeholder="创建人"
            />
          </template>
        </XForm>
      </template>
      <template #toolbar_btns>
        <VActionBar :actions="actions" />
      </template>
      <template #operation="{ row }">
        <el-button
          v-hasPermi="[financeManageAuthList.initial_bills.import]"
          link
          type="primary"
          @click="handleAdd(row)"
        >
          编辑
        </el-button>
        <el-button link type="primary" @click="handleLog(row)">
          日志
        </el-button>
      </template>
    </VTable>
    <Add
      :id="addId"
      v-model="addVisible"
      :option="optionsDataAll"
      @close="addId = null"
      @refresh="refresh"
    />
    <SpecialLog
      dialog
      v-model="logVisible"
      :autoLoad="false"
      tag="FINANCE_TC_COST_CONFIG"
      :business_id="logId"
      @close="logId = ''"
    />
  </VPage>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import XForm from "@/components/XForm/index.vue";
import Add from "./add/index";
import { useEnumSelect } from "@/hooks";
import { getTableSelect, tipMessage } from "@/hooks/tool.js";
import { financeManageAuthList } from "@/Auth/finance-manage.js";
import SpecialLog from "@/components/SpecialLog/index.vue";
import {
  financeTcCostConfigList,
  optsTcFeeConfig,
  optsTcMainConfig,
  financeTcCostConfigDelete,
} from "./api.js";
const { proxy } = getCurrentInstance();
const optionsData = reactive({
  is_calc_costing: [
    { label: "是", value: 1 },
    { label: "否", value: 0 },
  ],
  is_container: [
    { label: "整柜", value: 1 },
    { label: "散货", value: 0 },
  ],
});
const getOptsTcFeeConfig = async () => {
  const { data } = await optsTcFeeConfig();
  optionsData.tcCost = data || [];
};
getOptsTcFeeConfig();
const getOptsTcMainConfig = async () => {
  const { data } = await optsTcMainConfig();
  optionsData.tcMainCost = data || [];
};
getOptsTcMainConfig();
const { options: optionsData1 } = useEnumSelect({
  params: ["tc_sys_fee_config"],
});
const optionsDataAll = computed(() =>
  Object.assign({}, optionsData, optionsData1.value)
);
const tableRef = ref();
const tableOptins = reactive({
  formConfig: {
    data: {
      dateRange: { type: "submit_time", value: [], range: false }, // 组合+日期范围
    },
  },
  tooltipConfig: {
    showAll: false,
  },
  isToggle: true,
  columns: [
    { fixed: "left", width: 50, type: "checkbox" },
    { fixed: "left", width: 50, title: "编号", type: "seq" },
    { fixed: "left", title: "费用项", minWidth: 160, field: "fee_label" },
    { fixed: "left", title: "归属费用", minWidth: 100, field: "fee_cate" },
    {
      fixed: "left",
      title: "对应头程费用",
      minWidth: 160,
      field: "map_tc_fee_label",
    },
    { title: "是否计算成本", width: 110, field: "is_calc_costing" },
    {
      title: "是否整柜",
      width: 110,
      field: "fee_attrs_text",
      slots: {
        default: ({ row }) => {
          return <div>{row?.fee_attrs_text?.join("/") || "-"}</div>;
        },
      },
    },
    { title: "备注", minWidth: 260, field: "remark" },
    { title: "创建人员", width: 160, field: "create_user" },
    { title: "创建时间", width: 160, field: "create_time" },
    { title: "更新人员", width: 160, field: "update_user" },
    { title: "更新时间", width: 160, field: "update_time" },
    {
      title: "操作",
      width: 120,
      fixed: "right",
      slots: { default: "operation" },
    },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        return financeTcCostConfigList({ ...form, ...page }).then((res) => {
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});
const addId = ref(null);
const addVisible = ref(false);
const handleAdd = (item) => {
  addVisible.value = true;
  addId.value = item?.id || null;
};
const handleDelete = () => {
  const id = getTableSelect(tableRef.value);
  if (!id?.length) return ElMessage.warning("请至少选择一条数据!");
  proxy?.confirm({
    title: "提示",
    content: (
      <p>
        确认删除选中的
        <span class="text-[#3366F1] px-[4px]">{id.length || 1}</span>
        条数据？
      </p>
    ),
    beforeClose: async (action, instance, done) => {
      if (action === "confirm") {
        try {
          instance.confirmButtonLoading = true;
          instance.confirmButtonText = "处理中..";
          const { data } = await financeTcCostConfigDelete({ id });
          tipMessage(data);
        } catch (e) {
          console.error(e);
        } finally {
          instance.confirmButtonLoading = false;
          done();
          refresh();
        }
      } else {
        done();
      }
    },
  });
};
const handleExport = () => {};
const refresh = () => {
  tableRef?.value.$table.commitProxy("query");
};
const logId = ref("");
const logVisible = ref(false);
const handleLog = (item) => {
  logId.value = item.id;
  logVisible.value = true;
};
const actions = ref([
  {
    label: "新增",
    icon: "add2",
    fn: () => {
      addVisible.value = true;
    },
    type: "primary",
    permission: [financeManageAuthList.initial_cost.add],
  },
  {
    label: "删除",
    icon: "del",
    fn: handleDelete,
    permission: [financeManageAuthList.initial_cost.delete],
  },
  // {
  //   label: "导出",
  //   icon: "import",
  //   fn: handleExport,
  //   right: true,
  //   permission: [financeManageAuthList.initial_bills.export],
  // },
]);
const publicStyle = { style: { width: "240px" } };
const fieldList = [
  {
    field: "fee_name",
    placeholder: "费用项",
    type: "input",
    ...publicStyle,
  },
  {
    field: "map_tc_fee_ident",
    type: "select",
    options: {
      placeholder: "头程费用",
      labelKey: "label",
      valueKey: "value",
    },
    collapseTags: true,
    multiple: true,
    class: "select-wrapper-style",
    originOption: "tcCost",
  },
  {
    field: "is_calc_costing",
    type: "select",
    originOption: "is_calc_costing",
    options: {
      placeholder: "是否计算成本",
    },
    style: { width: "130px" },
  },
  {
    field: "user",
    selectStyle: { width: "100px" },
    select: [
      { label: "创建人员", value: "create_user" },
      { label: "更新人员", value: "update_user" },
    ],
    slot: "create_user",
  },
  {
    field: "time",
    type: "dateTimeRange",
    style: { width: "360px" },
    selectStyle: { width: "100px" },
    select: [
      { label: "创建时间", value: "create_time" },
      { label: "更新时间", value: "update_time" },
    ],
    itemProps: {
      startPlaceholder: "最早时间",
      endPlaceholder: "最晚时间",
    },
  },
];
</script>
